<template>
    <!-- 个人简历详细内容Company--已有招聘--查看详情(该按钮)--个人简历 -->
    <div>
        <mengban v-show="mengban" @click="closePraD()"></mengban>
    <!-- 实习经历 -->
        <div id="shixi" v-show="practiceDetail">
            <h1 class="name">实习经历<i class="el-icon-close close" @click="closePraD()"></i></h1>
            <el-form ref="form"  label-width="80px">
                <el-row>
                <el-col :span="12">
                        <el-form-item label="公司名称" style="width:98%;">
                        <el-input :value="detailPractice.companyname" onfocus=this.blur()></el-input>
                        </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属行业" style="width:98%;">
                        <el-input :value="detailPractice.industry" onfocus=this.blur()></el-input>
                    </el-form-item>
                </el-col>
                </el-row>
                <el-row>
                <el-col :span="12">
                    <el-form-item label="所属部门" style="width:98%;">
                        <el-input :value="detailPractice.department" onfocus=this.blur()></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="职位名称" style="width:98%;">
                        <el-input :value="detailPractice.jobname" onfocus=this.blur()></el-input>
                    </el-form-item>
                </el-col>
                </el-row>

                <el-row>
                <el-col :span="12">
                    <el-form-item label="职位类型" style="width:98%;">
                        <el-input :value="detailPractice.jobtype" onfocus=this.blur()></el-input>
                    </el-form-item>   
                </el-col>
                <el-col :span="12">
                    <el-form-item label="拥有技能" style="width:98%;">
                        <el-input :value="detailPractice.skills" onfocus=this.blur()></el-input>
                    </el-form-item>  
                </el-col>
                </el-row>

                <el-form-item label="在职时间" style="width:99%">
                    <el-col :span="24">
                    <el-date-picker type="date"  style="width: 100%;"  :value="detailPractice.starttoend" readonly></el-date-picker>
                    </el-col>
                </el-form-item>
                
                <el-form-item label="工作内容" style="width:99%">
                    <el-input type="textarea"  rows="4px"  :value="detailPractice.workcontent" onfocus=this.blur()></el-input>
                </el-form-item>

            </el-form>
        </div>
    <!-- 项目经历 -->
     <div id="shixi" v-show="projectDetail">
        <h1 class="name">项目经历<i class="el-icon-close close" @click="closeProD()"></i></h1>
        <el-form ref="form"  label-width="80px">
            <el-row>
            <el-col :span="12">
                    <el-form-item label="项目名称" style="width:98%;">
                    <el-input :value="detailProject.name" onfocus=this.blur()></el-input>
                    </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="项目角色" style="width:98%;">
                    <el-input :value="detailProject.people" onfocus=this.blur()></el-input>
                </el-form-item>
            </el-col>
            </el-row>
            <el-row>
                <el-form-item label="项目链接" style="width:100%;">
                    <el-input :value="detailProject.internet" onfocus=this.blur()></el-input>
                </el-form-item>
            </el-row>
        
            <el-form-item label="在职时间" style="width:99%">
                <el-col :span="11">
                <el-date-picker type="date"  style="width: 100%;"  :value="detailProject.starttime" readonly></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                <el-date-picker type="date"  style="width: 100%;"  :value="detailProject.endtime" readonly></el-date-picker>
                </el-col>
            </el-form-item>
            
            <el-form-item label="项目描述" style="width:99%">
                <el-input type="textarea"  rows="4px"  :value="detailProject.description" onfocus=this.blur()></el-input>
            </el-form-item>
            <el-form-item label="项目业绩" style="width:99%">
                <el-input type="textarea"  rows="4px"  :value="detailProject.reward" onfocus=this.blur()></el-input>
            </el-form-item>
        </el-form>
        </div>
    <!-- 个人档案 -->
     <div id="shixi" v-show="archiveDetail">
        <h1 class="name1">个人档案<i class="el-icon-close close" @click="closeArcD()"></i></h1>
         <el-form :label-position="labelPosition" label-width="80px">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="姓名">
                             <el-input :value="detailArchive.username"  onfocus=this.blur()></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="职位">
                            <el-input :value="detailArchive.department"  onfocus=this.blur()></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                 <el-row>
                    <el-col :span="11">
                        <el-form-item label="生日">
                             <el-input :value="detailArchive.birthday" type="date" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="I D">
                            <el-input :value="detailArchive.id"   onfocus=this.blur()></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="经验">
                            <el-input :value="detailArchive.workage"  onfocus=this.blur()></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="学历">
                           <el-input :value="detailArchive.education"  onfocus=this.blur()></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                 <el-row>
                    <el-col :span="11">
                        <el-form-item label="考勤">
                             <el-rate :value="detailArchive.appear" style="margin-top:12px;" disabled></el-rate>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="绩效">
                             <el-rate :value="detailArchive.complete" style="margin-top:12px;" disabled></el-rate>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="奖励">
                           <el-input type="textarea" :value="detailArchive.reward" rows="2px"  onfocus=this.blur()></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="惩罚">
                             <el-input type="textarea" :value="detailArchive.punish"  onfocus=this.blur()></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="评价">
                    <el-input type="textarea" :value="detailArchive.comment"  onfocus=this.blur()></el-input>
                </el-form-item>
        </el-form>
        </div>
        <!-- 个人简历内容 -->

        <div id="resumeContent">
            <i class="el-icon-arrow-left back" @click="goBack()"></i>
            <!-- <button @click="get()">哈哈哈</button> -->
            <h1 class="name">个人简历</h1>
            <div class="personalResume">
            <el-row>
                <h2>基本情况</h2>
                <div class="line"></div>
                <el-col :span="15">
                    <el-col :span="8"><img src="../src/image/头像.webp" class="photo"></el-col>
                    <el-col :span="8">
                        <p>姓名：<label>{{resumeDetails.username}}</label></p>
                        <p>号码：<label>{{resumeDetails.phoneNumber}}</label></p>
                    </el-col>
                    <el-col :span="8">
                        <p>学历：<label>{{advantage.education}}</label></p>
                        <p>状态：<label>{{advantage.workstatus}}</label></p>
                    </el-col>
                </el-col>
            </el-row>
            </div>
            <div class="personalResume">
            <el-row>
                <h2>个人优势</h2>
                <div class="line"></div>
                <ul>
                    <li>{{advantage.advantage}}</li>
                </ul>
            </el-row>
            </div>
            <div class="personalResume">
            <el-row>
                <h2>实习经历</h2>
                <div class="line"></div>
                    <ul v-for="(i,index) in Practices" :key="index">
                        <li  @click="openPratice(i)" >{{i.companyname}}</li>
                    </ul>
            </el-row>
            </div>
            <div class="personalResume">
            <el-row>
                <h2>项目经历</h2>
                <div class="line"></div>
                    <ul  v-for="(item,index) in Projects" :key="index">
                        <li @click="openProject(item)">{{item.name}}</li>
                    </ul>
            </el-row>
            </div>
            <div class="personalResume">
            <el-row>
                <h2>工作档案</h2>
                <div class="line"></div>
                    <ul v-for="(ii,index) in Archives" :key="index">
                        <li  @click="openArchive(ii)">{{ii.department}}</li>
                    </ul>
            </el-row>
            </div>
        </div>
    </div>
</template>


<style lang="less" scoped>
#resumeContent{
    .back{
        font-size: 20px;
    }
    .line{
    width: 100%;
    height: 0px;
    border: 0.5px dashed gray;
    }
    .photo{
        width: 100px;
        height: 100px;
        margin:30px;
    } 
    h2{
        color: #3db3b7;
        margin: 0px;
        margin-left: 20px;
    }
    h1{
        font-size: 30px;
        text-align: center;
        margin: 0px;
        margin-top: -50px;
    }
    .el-col{
        border: none;
        p{
            margin: 0px;
            height: 60px;
        }
    }
    .personalResume{
        li{
            float: left;
            list-style: none;
            margin-right: 50px;
            cursor: pointer;
        }
    }
    .el-row{
        border:none;
    }
}
#shixi{
    height: 81%;
    box-shadow: 10px 10px 5px #888888;
    z-index: 1;
    position: absolute;
    top:10%;
    background-color: #fff;
    left: 40%;
    opacity: 1;
    padding: 20px;
    .name,.name1{
            color: #2b2b2b;
            opacity: 0.8;
            font-size: 25px;
            margin: 0px 10px 15px 10px;
    } 
    .name1{
            margin: 0px 10px 15px 40px;
    }
    // span{
    //     color: #3db3b7;
    //     font-size: 23px;
    // }
    // h1{
    //     font-size: 25px;
    //     color: #3db3b7;
    //     margin: 0 10px;
    //     text-align: left;
    // }
    // p{
    //     height: 40px;
    //     margin: 0;
    //     margin-left: 20px;
    //     color: #686565;
    //     label{
    //         color: #686565;
    //         font-weight: 700;
    //     }
    // }
    .close{
        font-size: 23px;
        float: right;
        margin: 10px;
    }
}
</style>

<script>
import Mengban from '@/components/Mengban'
export default {
    components: { Mengban },
    data(){
        return{
            resumeDetails:[],
            advantage:[],
            jobseekerid:'',
            mengban:false,
            practiceDetail:false,
            projectDetail:false,
            archiveDetail:false,
            Projects:[],
            Practices:[],
            Archives:[],
            detailPractice:[],
            detailProject:[],
            detailArchive:[]
        }
    },
    methods:{
        openPratice(res){
            console.log(res.id);
            this.mengban = true
            this.practiceDetail = true
             depot.get({
               url:'/empservice/link/getDetailPractice/'+res.id,
               cb:(res)=>{
                   console.log("【DetailPractice】",res);
                   this.detailPractice = res.data.practicejob
               }
           })
        },
        openProject(res){
            console.log(res.id);
            this.mengban = true
            this.projectDetail = true
            depot.get({
               url:'/empservice/link/getDetailProject/'+res.id,
               cb:(res)=>{
                   console.log("【DetailProject】",res);
                   this.detailProject = res.data.project
               }
           })
        },
        openArchive(res){
            console.log(res.id);
            this.mengban = true
            this.archiveDetail = true
            depot.get({
               url:'/empservice/link/getDetailArchives/'+res.id,
               cb:(res)=>{
                   console.log("【DetailArchives】",res);
                   this.detailArchive = res.data.archive
               }
           })
        },
        closePraD(){
            this.mengban = false
            this.practiceDetail = false
        },
        closeProD(){
            this.mengban = false
            this.projectDetail = false
        },
        closeArcD(){
            this.mengban = false
            this.archiveDetail = false
        },
        goBack(){
            this.$router.push("./ViewResume")
        },
        getInfo(){
            console.log("【jobseekerid】",this.jobseekerid);
            // 基本情况和个人优势信息获取
            depot.get({
               url:'/empservice/link/getInfoById/'+this.jobseekerid,
               cb:(res)=>{
                   console.log("【getInfoById】",res.data.emp);
                   this.resumeDetails = res.data.emp
               }
           })
             depot.get({
               url:'/empservice/link/getEduAndAdv/'+this.jobseekerid,
               cb:(res)=>{
                   console.log("【getEduAndAdv】",res);
                   this.advantage = res.data.resume
               }
           })
           //实习经历获取
           depot.get({
               url:'/empservice/link/getPracticeExp/'+this.jobseekerid,
               cb:(res)=>{
                   console.log("【Practices】",res.data.practices);
                   this.Practices = res.data.practices
               }
           })
           //项目经历获取
           depot.get({
               url:'/empservice/link/getProjectExp/'+this.jobseekerid,
               cb:(res)=>{
                   console.log("【Projects】",res.data.projects);
                   this.Projects = res.data.projects
               }
           })
           //工作档案获取
           depot.get({
               url:'/empservice/link/getReward/'+this.jobseekerid,
               cb:(res)=>{
                   console.log("【getReward】",res.data.archives);
                   this.Archives  = res.data.archives
               }
           })
        },
    },
    mounted:function(){
        this.bus.$on('send',(res)=>{
            console.log(res);
            this.jobseekerid = res
        })
        this.getInfo()
    },
    activated(){
         this.getInfo()
         console.log('ResumeDetail实例被激活时')
    },

    deactivated(){
            // console.log('实例没有被激活时')
    },
    beforeDestroy() {
        this.bus.$off('send')
    },
}
</script>